<!doctype html>
<html><head>
	<!-- Basic Page Needs -->
        <meta charset="utf-8">
        <title>Appcorner - Shop</title>
        <meta name="description" content="A Template by Gozha.net">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Gozha.net">

 
    <!-- Mobile Specific Metas-->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="telephone=no" name="format-detection">
    
    <!-- Fonts -->
        <!-- SourceSansPro -->
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic' rel='stylesheet' type='text/css'>
        <!-- Icomoon -->
        <link href="css/icomoon.css" rel="stylesheet" />
        <!--  Font awesome 4-->
        <link href="css/font-awesome.css" rel="stylesheet" />
    
    <!-- Stylesheets --> 
    	
        <!-- Bootstrap 3 -->
    	  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
        
        <!-- jQuery UI -->
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <!-- Mobile navigation menu-->
        <link href="css/gozha-nav.css" rel="stylesheet" />

        <!-- Selectbox -->
        <link href="css/jquery.selectbox.css" rel="stylesheet" />
        <!-- Pagination -->
        <link rel="stylesheet" href="css/jPages.css">
        <!-- Gallery change page amination -->
        <link rel="stylesheet" href="css/animate-switch.css">

        <!--Color panel-->
        <link href="css/switcher.css" rel="stylesheet" />

        <!-- Custom -->
        <link href="css/base.css?v=1" rel="stylesheet" />
        <link href="css/style.css?v=1" rel="stylesheet" />
		
		<!-- Basic JavaScript-->
		<!-- Modernizr -->
		<script src="js/modernizr.custom.05768.js"></script>
    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
    	<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script> 
		<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>		
    <![endif]-->
 
</head>

<body class=''>
    <div class='wrapper'>
        <header class='header'>
            <div class='container'>
                <p class='call-number'>You can just call us <span>+1-888-555-5555</span></p>
                <!-- social icon -->
                <ul class='social-icon pull-right'>
                    <li><a href="#"><i class='icon-instagram'></i></a></li>
                    <li><a href="#"><i class='icon-dribbble'></i></a></li>
                    <li><a href="#"><i class='icon-tumblr'></i></a></li>
                    <li><a href="#"><i class='icon-linkedin'></i></a></li>
                    <li><a href="#"><i class='icon-pinterest'></i></a></li>
                    <li><a href="#"><i class='icon-googleplus'></i></a></li>
                    <li><a href="#"><i class='icon-facebook'></i></a></li>
                    <li><a href="#"><i class='icon-twitter'></i></a></li>
                </ul><!-- end of social icon list -->

                <div class='top-navigation'>
                  <div class="navigation-front">
                    <a href="index.html" class='logo'>AppCorner</a>
                    <div id="navigation-box">
                        <a href="#" id="navigation-toggle">
                            <span class="menu-icon"></span>
                        </a> 
                        <ul id="navigation" class="hover-link">
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="#" data-hover='Home'>Home</a>
                                <ul>
                                    <li><a href="homepage1.html">Revolution Slider</a></li>
                                    <li><a href="homepage2.html">OneByOne Slider</a></li>
                                    <li><a href="homepage3.html">BxSlider</a></li>
                                    <li><a href="homepage4.html">FlexSlider</a></li>
                                    <li><a href="full-width-slider.html">Full Width</a></li>
                                    <li><a href="index.html">Video Slider</a></li>

                                </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="#" data-hover='Pages'>Pages</a>
                                <ul>
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="single-employee.html">Single employee</a></li>
                                    <li><a href="service.html">Services</a></li>
                                    <li><a href="single-service.html">Single service</a></li>
                                    <li><a href="price.html">Price</a></li>
                                    <li><a href="page-element.html">Page elements</a></li>
                                    <li><a href="typography.html">Typography</a></li>
                                    <li><a href="icon-font-1.html">Icons - Font awesome</a></li>
                                    <li><a href="icon-font-2.html">Icons - Icomoon</a></li>
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="support.html">Support</a></li>
                                    <li><a href="coming-soon.html">Coming soon</a></li>
                                    <li><a href="404.html">404 error</a></li>

                                </ul>
                            </li>

                            <li class="visible-lg">
                               <span class="sub-nav-toggle plus"></span>
                               <a href="#" data-hover='Mega Menu'>Mega Menu</a>
                               <ul class="mega-menu">
                                  <li class="col-md-6">
                                    <div class="mega-menu-text">
                                        <h4>About Us</h4>
                                        <div class="image-wrap">
                                           <img alt='' src="http://placehold.it/420x420">
                                        </div>
                                        <div>
                                            <p>Morbi sit amet erat ut purus sagittis rutrum. Quisque ac porttitor massa. Maecenas sem magna, dignissim eu venenatis nec, cursus quis massa. 
                                                <br>
                                                <br>
                                            Sed et est tempor mi mollis suscipit sit amet et nulla. Morbi fringilla, quam eget blandit ornare, ipsum metus volutpat felis, eget cursus eros nulla nec purus.</p>        
                                        </div>
                                      </div>
                                  </li>
                                  <li class="col-md-6">
                                    <div class="mega-menu-item">
                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Pages</h4></li>
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="single-employee.html">Single employee</a></li>
                                        <li><a href="service.html">Services</a></li>
                                        <li><a href="single-service.html">Single service</a></li>
                                        <li><a href="price.html">Price</a></li>
                                        <li><a href="page-element.html">Page elements</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="empty"><div></div></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="icon-font-2.html">Icons</a></li>
                                        <li><a href="coming-soon.html">Coming soon</a></li>
                                        <li><a href="404.html">404 error</a></li>
                                        <li><a href="login.html">Login</a></li>
                                        <li><a href="support.html">Support</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Gallery</h4></li>
                                        <li><a href="gallery-random.html">Random</a></li>
                                        <li><a href="gallery-three-columns.html">3 columns</a></li>
                                        <li><a href="gallery-two-columns.html">2 columns</a></li>
                                      </ul>

                                      <ul class="col-md-3">
                                        <li class="heading"><h4>Blog</h4></li>
                                        <li><a href="blog-style-one.html">Style 1</a></li>
                                        <li><a href="blog-style-two.html">Style 2</a></li>
                                        <li><a href="blog-style-three.html">Style 3</a></li>
                                        <li><a href="single-post.html">Post</a></li>
                                        <li><a href="single-post-two.html">Post style 2</a></li>
                                      </ul>
                                      </div>
                                  </li>
                               </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="gallery-random.html" data-hover='Gallery'>Gallery</a>
                                <ul>
                                    <li><a href="gallery-random.html">Gallery random</a></li>
                                    <li><a href="gallery-three-columns.html">Gallery 3 columns</a></li>
                                    <li><a href="gallery-two-columns.html">Gallery 2 columns</a></li>
                                    <li><a href="gallery-three-columns-iso.html">Gallery 3 columns sorted</a></li>
                                    <li><a href="gallery-two-columns-iso.html">Gallery 2 columns sorted</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="blog-style-one.html" data-hover='Blog'>Blog</a>
                                <ul>
                                    <li><a href="blog-style-one.html">Blog style 1</a></li>
                                    <li><a href="blog-style-two.html">Blog style 2</a></li>
                                    <li><a href="blog-style-three.html">Blog style 3</a></li>
                                    <li><a href="blog-audio.html">Audio blog</a></li>
                                    <li><a href="blog-video.html">Video blog</a></li>
                                    <li><a href="single-post.html">Single post</a></li>
                                    <li><a href="single-post-two.html">Single post style 2</a></li>
                                </ul>
                            </li>

                            <li>
                                <span class="sub-nav-toggle plus"></span>
                                <a href="shop-sidebar.html" data-hover='Shop' class='active'>Shop</a>
                                <ul>
                                    <li><a href="shop-sidebar.html">Shop with sidebar</a></li>
                                    <li><a href="shop-full.html">Shop fullwidth</a></li>
                                    <li><a href="single-product-sidebar.html">Single product sidebar</a></li>
                                    <li><a href="single-product-full.html">Single product fullwidth</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="shopping-cart.html">Shopping cart</a></li>
                                </ul>
                            </li>
                            
                            <li><a href="contact.html" data-hover='Contact'>Contact</a></li>
                        </ul>
                  </div>
                </div>
              </div>

                <div class='main-zone'>
                    <div class="corner"></div>
                    <div class='corner-line'></div>
                    
                   <div class='current-page'>
                      <hr class="top-devider" />
                        <h1>Shop with sidebar</h1>
                        <ol class="breadcrumb">
                          <li><a href="index.html">home</a></li>
                          <li class="active">shop</li>
                        </ol>
                   </div>
                </div>
            </div>
        </header>

        <section class="container waypoint" data-animate-up="nav-strict" data-animate-down="nav-show">
            <div class="product-control">
              <select name="sorting_item" id="sort-product" class="product-control__sort" tabindex="0">
                  <option value="1">default sorting</option>
                  <option value="1">by popularity</option>
                  <option value="2">by arrival</option>
                  <option value="3">by rating</option>
                  <option value="4">by price: low to high</option>
                  <option value="5">by price: high to low</option>
              </select>

              <span class="product-control__indecator">135 results</span>

              <div class='cart'>
                <div class="cart__link"><i class="icon-cart cart__marker"></i><span class="cart__indecator">Cart (1) - <strong>$ 299</strong></span> <i class="icon-arrow-down6 cart__toggle"></i></div>
                <div class='cart__list'>

                  <div class="cart__item">
                    <a href="#" class="cart__item-image">
                      <img alt='' src="http://placehold.it/202x202">
                    </a>
                    <a href="#" class="cart__item-title">Laptop NX3452</a>
                    <div class="cart__item-rating"><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i></div>
                    <p class="cart__item-price">$ 198</p>
                    <p class="cart__item-bonus">Bonus: 5%</p>

                    <a href="#" class="close"><i class="icon-cross"></i></a>
                  </div>

                  <div class="cart__item">
                    <a href="#" class="cart__item-image">
                      <img alt='' src="http://placehold.it/202x202">
                    </a>
                    <a href="#" class="cart__item-title">Laptop AJ124 Mini</a>
                    <div class="cart__item-rating"><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i></div>
                    <p class="cart__item-price">$ 101</p>
                    <p class="cart__item-bonus">Bonus: 2%</p>

                    <a href="#" class="close"><i class="icon-cross"></i></a>
                  </div>
                  
                  <div class="checkout-wrap">
                    <a href="#" class="cart__checkout read-more">check out</a>
                  </div>

                </div>
              </div>
            </div>

            <div class='col-sm-9'>
              <div id="product-list" class="row">

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Laptop NX3452</a>
                      <p class="product__price">$ 198</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Retro Phone</a>
                      <p class="product__price">$ 67</p>
                      <p class="product__discount">$ 78</p>

                      <span class="product__discount-marker">Sale!</span>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Smartphone S230</a>
                      <p class="product__price">$ 399</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Funny Smartphone</a>
                      <p class="product__price">$ 198</p>
                      <p class="product__discount">$ 260</p>

                      <span class="product__discount-marker">Sale!</span>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Laptop SS100</a>
                      <p class="product__price">$ 599</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Tablet R412</a>
                      <p class="product__price">$ 355</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Smartphone 543</a>
                      <p class="product__price">$ 198</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Tablet KJI8</a>
                      <p class="product__price">$ 489</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Laptop XAQ09</a>
                      <p class="product__price">$ 277</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Smartphone E321</a>
                      <p class="product__price">$ 288</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Tablet U76</a>
                      <p class="product__price">$ 400</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Laptop IU8976</a>
                      <p class="product__price">$ 433</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Smartphone E321</a>
                      <p class="product__price">$ 288</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Tablet U76</a>
                      <p class="product__price">$ 400</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Laptop IU8976</a>
                      <p class="product__price">$ 433</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Tablet R412</a>
                      <p class="product__price">$ 355</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Smartphone 543</a>
                      <p class="product__price">$ 198</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Tablet KJI8</a>
                      <p class="product__price">$ 489</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Laptop XAQ09</a>
                      <p class="product__price">$ 277</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Smartphone E321</a>
                      <p class="product__price">$ 288</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Tablet U76</a>
                      <p class="product__price">$ 400</p>
                    </div>
                </div>
              </div>

              <div class="col-sm-6 col-md-4">
                <div class="product">
                    <div class="product__image">
                      <img alt='' src="http://placehold.it/502x502">

                      <a href="#" class="product__action product__action--info"><i class="icon-search product__action-icon"></i><span>details</span></a>
                      <a href="#" class="product__action product__action--buy"><i class="icon-cart product__action-icon"></i><span>add to cart</span></a>
                    </div>
                    <div class="product__info">
                      <a href="#" class="product__title">Laptop IU8976</a>
                      <p class="product__price">$ 433</p>
                    </div>
                </div>
              </div>

              </div>

              <div class="pagination"></div>
            
            </div>

            <aside class='col-sm-3'>
              
              <div class="sitebar sitebar--thin">
                    <form id="search-form" method="get">
                        <input type="text" class="search-field" name="s" maxlength="120" placeholder='type your request'>
                        <div class="search-submit">
                            <input type="submit" class="search-submit-buttom" value=''>
                        </div>
                    </form>

                    <h2>categories</h2>
                    <ul class="style-five">
                        <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                        <li><a href="#">Donec elementum lectus</a></li>
                        <li><a href="#">Nam suscipit nulla vitae leo</a></li>
                        <li><a href="#">Fusce ornare dapibus</a></li>
                        <li><a href="#">Duis tristique</a></li>
                    </ul>

                    <h2 class="heading-low">Price</h2>
                    <div id="slider-range" class="price-range"></div>
                      <input type="text" id="amount" class='price-indecator'>

                    <h2 class="heading-low">display size</h2>
                    <ul class="style-five">
                        <li><a href="#">11 inches</a></li>
                        <li><a href="#">13 inches</a></li>
                        <li><a href="#">15 inches</a></li>
                    </ul>

                     <h2 class="heading-low">color</h2>
                    <ul class="style-five">
                        <li><a href="#">White</a></li>
                        <li><a href="#">Silver</a></li>
                        <li><a href="#">Black</a></li>
                        <li><a href="#">Blue</a></li>
                    </ul>

                    <h2>tags</h2>
                    <div>
                        <a href="#" class="tags-item">lorem ipsum</a>
                        <a href="#" class="tags-item">consectetur</a>
                        <a href="#" class="tags-item">gravida</a>
                        <a href="#" class="tags-item">adipiscing</a>
                        <a href="#" class="tags-item">nunc ante</a>
                        <a href="#" class="tags-item">dapibus nec</a>
                        <a href="#" class="tags-item">commodo nec</a>
                        <a href="#" class="tags-item">quis justo</a>
                        <a href="#" class="tags-item">lorem ipsum</a>
                        <a href="#" class="tags-item">consectetur</a>
                        <a href="#" class="tags-item">adipiscing</a>
                        <a href="#" class="tags-item">nunc ante</a>
                        <a href="#" class="tags-item">dapibus nec</a>
                        <a href="#" class="tags-item">commodo nec</a>
                        <a href="#" class="tags-item">quis justo</a>
                    </div>

                    <a href='#' class="popular-post">
                        <h6>Top product</h6>
                        <img alt='' src="http://placehold.it/404x396">
                         <span href="#" class="product__title">Laptop RS 21868</span>
                        <p class="product__price">$ 277</p>
                    </a>

                </div>

            </aside>
        </section>

        <footer class='footer'>
            <div class='container'>
                <div class='col-sm-8 col-md-8 col-lg-8'>
                    <h2>Contact info</h2>
                    <p class="footer-info">Vivamus vel lacus eu nunc vehicula ultricies vel vulputate dui. Mauris vehicula mollis mi. Quisque aliquam porta magna, at bibendum magna tempor eget. Donec consequat ipsum in nibh consequat id suscipit libero bibendum. Sed elementum imperdiet magna, convallis dapibus turpis ultricies eu.</p>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-location'></i>Address</h4>
                        <p>V101 West Street, New
                        <br/> 
                        York, NY 12345</p>
                    </div>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-mail'></i>Email</h4>
                        <p>
                        appcorner@gmail.com
                        <br/> 
                        help@appcorner.com</p>
                    </div>
                    <div class='col-xs-4 col-sm-4 col-md-3 col-lg-3 contact-info'>
                        <h4><i class='icon-mobile'></i>Phone</h4>
                        <p>+ 44 1225 324 980
                        <br/> 
                        + 44 1225 324 980</p>
                    </div>
                   
                    <div class='col-sm-12 col-md-12 col-lg-12'>
                        <ul class='social-icon pull-left'>
                            <li><a href="#"><i class='icon-instagram'></i></a></li>
                            <li><a href="#"><i class='icon-dribbble'></i></a></li>
                            <li><a href="#"><i class='icon-tumblr'></i></a></li>
                            <li><a href="#"><i class='icon-linkedin'></i></a></li>
                            <li><a href="#"><i class='icon-pinterest'></i></a></li>
                            <li><a href="#"><i class='icon-googleplus'></i></a></li>
                            <li><a href="#"><i class='icon-facebook'></i></a></li>
                            <li><a href="#"><i class='icon-twitter'></i></a></li>
                        </ul>
                    </div>
                </div>

                <div class='col-sm-4 col-md-4 col-lg-4 mobile-clear'>
                    <h2>Drop us a line</h2>
                    <!-- contact form inputs-->
                    <form id="contact-form" novalidate="" name="contact-form" method="post" >
                        <input type='email' name='user-email' placeholder='Email'>
                        <textarea name="user-message" placeholder="Message"></textarea>
                        <button type="submit" class='btn btn-large btn-success btn-form icon-circled-right btn-animate'>submit</button>
                    </form><!-- end contact form inputs -->
                </div>

                <div class='clearfix'></div>
                <div class='container devider'></div>

                <p class='copy'>© Appcorner, 2013. All rights reserved. Done by Olia Gozha</p>

            </div>
        </footer>
    </div>

    <!-- JavaScript-->
        <!-- jQuery 1.9.1--> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
        <!-- Migrate --> 
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <!-- jQuery UI -->
         <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <!-- Bootstrap 3--> 
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
        <!-- Mobile navigation menu-->
        <script src="js/jquery.mobile.menu.js"></script>
        <!-- Waypoint -->
        <script src="js/waypoints.min.js"></script>
        <!-- Form -->
        <script src="js/jquery.form.js"></script>
        <!-- Selectbox -->
        <script src="js/jquery.selectbox-0.2.min.js"></script>
        <!-- Pagination -->
        <script src="js/jPages.js"></script>

        <!-- Custom -->
        <script src="js/custom.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                initShop();
            });
        </script>

</body>